import React, { useEffect, useState } from "react";
import '../../appcommon.css';
import styles from './assetdetail.module.css';
import { useDispatch } from "react-redux";
import { DotLoading, Mask } from "antd-mobile";
import { saveEvent } from "@/store/actions/saveEvent";
import { useHistory } from "react-router-dom/cjs/react-router-dom.min";
import icon_success from '@/assets/icon_success.png'
import icon_processing from '@/assets/icon_processing.png'
import icon_failure from '@/assets/icon_failure.png'



import NavigateBar from "@/components/NavigateBar";
import { getAssetResultInfo } from "@/utils/storage";
import { LangVnd } from '@/utils/langVnd';

/**
 * 登录页
 */
export default function AssetDetailResult() {

    //loading状态
    const [maskVisible, setMaskVisible] = useState(false)

    //显示add home弹框
    const [addHomeMaskVisible, setAddHomeMaskVisible] = useState(false);
    const [addHomeMaskIsHomeMode, setAddHomeMaskIsHomeMode] = useState(true);

    // 当前 信息
    const [curResultInfo, setCurResultInfo] = useState({})

    // 文案翻译
    const [curLang, setCurLang] = useState(LangVnd);

    // 获取 Redux 分发器
    const dispatch = useDispatch()

    //router
    const history = useHistory()

    //清空登录信息
    useEffect(() => {
        //关闭loading
        setMaskVisible(false);

        // 获取账号信息
        let assetDetailResultInfo = getAssetResultInfo();
        setCurResultInfo(assetDetailResultInfo);

        //打点
        doHitEvent("ASSET_RESULT_START")

        return () => {
            //打点
            doHitEvent("ASSET_RESULT_END")
        }
    }, [])

    // 点击 next
    const onHandleSubmit = () => {
        console.log('点击确定');

        // 返回
        history.goBack();
    };

    //打点接口
    const doHitEvent = async (type, remark = "") => {
        console.log("doHitEvent: " + type + " , " + remark);

        try {
            //获取Action
            const action = saveEvent(type, remark)

            //触发接口
            await dispatch(action)

        } catch (e) {
            console.log(e)
        }
    }


    return (
        <div className='pageRoot pageBackgroundColorGray'>
            <NavigateBar theme="white" showLogout={false} onAddFavorite={() => { setAddHomeMaskIsHomeMode(false); setAddHomeMaskVisible(true) }} onAddHome={() => { setAddHomeMaskIsHomeMode(true); setAddHomeMaskVisible(true) }}>{curLang.assetDetailResultTransfer}</NavigateBar>

            {/* 使用添加 home screen bar */}
            {/* <AddFavorite onAddHome={() => { setAddHomeMaskIsHomeMode(true); setAddHomeMaskVisible(true) }} /> */}

            <div className="pageContentColumnFull">
                {/* Top */}
                <div className={`${styles.assetDetailResultTop} pageMarginTop16px`}>
                    {curResultInfo.statusDes === "Processing" && <img className={styles.assetDetailResultStatusIcon} alt="" src={icon_processing} />}
                    {curResultInfo.statusDes === "Successful" && <img className={styles.assetDetailResultStatusIcon} alt="" src={icon_success} />}
                    {curResultInfo.statusDes === "Failure" && <img className={styles.assetDetailResultStatusIcon} alt="" src={icon_failure} />}

                    {curResultInfo.statusDes === "Processing" && <div className={`${styles.assetDetailResultStatus} ${styles.assetDetailListItemStatusFontProcessing}`}>{curLang.assetDetailProcessing}</div>}
                    {curResultInfo.statusDes === "Successful" && <div className={`${styles.assetDetailResultStatus} ${styles.assetDetailListItemStatusFontSuccess}`}>{curLang.assetDetailSuccessful}</div>}
                    {curResultInfo.statusDes === "Failure" && <div className={`${styles.assetDetailResultStatus} ${styles.assetDetailListItemStatusFontFail}`}>{curLang.assetDetailFailure}</div>}

                    <div className={styles.assetDetailResultStatusDate}>{curResultInfo.createTime}</div>
                </div>

                <div className={`${styles.assetDetailResultMenuContent} pageMarginTop26px`}>
                    <div className={styles.assetDetailResultMenuRow}>
                        <div className={styles.assetDetailResultMenuTitle}>Details</div>
                        {curResultInfo.isIn && <div className={styles.assetDetailResultMenuValue}>{curLang.assetDetailResultReceive}</div>}
                        {!curResultInfo.isIn && <div className={styles.assetDetailResultMenuValue}>{curLang.assetDetailResultOut}</div>}
                    </div>

                    <div className={styles.assetDetailResultMenuRow}>
                        <div className={styles.assetDetailResultMenuTitle}></div>
                        <div className={styles.assetDetailResultMenuValue}>{curResultInfo.amount}</div>
                    </div>

                    <div className={styles.assetDetailResultMenuRow}>
                        <div className={styles.assetDetailResultMenuTitle}></div>
                        <div className={styles.assetDetailResultMenuValue}>{curResultInfo.symbol}</div>
                    </div>

                    {curResultInfo.statusDes === "Processing" && <img className={styles.assetDetailResultTipsIcon} alt="" src={icon_processing} />}
                    {curResultInfo.statusDes === "Successful" && <img className={styles.assetDetailResultTipsIcon} alt="" src={icon_success} />}
                    {curResultInfo.statusDes === "Failure" && <img className={styles.assetDetailResultTipsIcon} alt="" src={icon_failure} />}

                </div>

                <div className={`${styles.assetDetailResultMenuContent} pageMarginTop16px`}>
                    {curResultInfo.isIn && <div className={styles.assetDetailResultMenuRow}>
                        <div className={styles.assetDetailResultMenuTitle}>{curLang.assetDetailResultFrom}</div>
                        <div className={styles.assetDetailResultMenuValue}>{curResultInfo.address}</div>
                    </div>}

                    {!curResultInfo.isIn && <div className={styles.assetDetailResultMenuRow}>
                        <div className={styles.assetDetailResultMenuTitle}>{curLang.assetDetailResultTo}</div>
                        <div className={styles.assetDetailResultMenuValue}>{curResultInfo.address}</div>
                    </div>}
                </div>

                <div className={`${styles.assetDetailResultMenuContent} pageMarginTop16px`}>
                    <div className={styles.assetDetailResultMenuRow}>
                        <div className={styles.assetDetailResultMenuTitle}>{curLang.assetDetailResultTxID}</div>
                        <div className={styles.assetDetailResultMenuValue}>{curResultInfo.txid}</div>
                    </div>
                </div>
            </div>

            {/* 底部 margin */}
            <div className="pageBottomEdge"></div>

            {/* load mask */}
            <Mask visible={maskVisible} opacity={0.1}
                onMaskClick={() => { }}>
                <div className="pageLoadingOverlayContent">
                    <span style={{ fontSize: 24, color: '#3498DB' }} >
                        <DotLoading color="currentColor" />
                    </span>
                </div>
            </Mask>
        </div >
    )
}